<template>
	<view class="message-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<text class="header-title">消息中心</text>
			<view class="header-actions">
				<uv-icon name="search" size="22" color="#333" @click="searchMessages"></uv-icon>
				<uv-icon name="more-dot-fill" size="22" color="#333" style="margin-left: 30rpx;" @click="showMenu"></uv-icon>
			</view>
		</view>

		<!-- 消息分类标签 -->
		<scroll-view class="message-tabs" scroll-x>
			<view class="tabs-wrapper">
				<view 
					class="tab-item" 
					:class="{ 'active': activeTab === index }"
					v-for="(tab, index) in tabs" 
					:key="index"
					@tap="switchTab(index)"
				>
					{{ tab.name }}
					<text class="unread-badge" v-if="tab.unread > 0">{{ tab.unread > 99 ? '99+' : tab.unread }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 消息列表 -->
		<scroll-view class="message-list" scroll-y>
			<view v-if="filteredMessages.length === 0" class="empty-state">
				<uv-icon name="chat" size="60" color="#ccc"></uv-icon>
				<text class="empty-text">暂无消息</text>
				<text class="empty-desc">您还没有收到任何消息，系统消息会在这里显示</text>
				<uv-button 
					type="primary" 
					plain 
					size="mini" 
					style="margin-top: 30rpx;"
					@click="refreshMessages"
				>
					刷新
				</uv-button>
			</view>
			
			<view v-else>
				<view class="message-group" v-for="(group, groupIndex) in groupedMessages" :key="groupIndex">
					<text class="group-title" v-if="group.date">{{ group.date }}</text>
					<view 
						class="message-item" 
						v-for="(item, index) in group.messages" 
						:key="index" 
						@tap="readMessage(item)"
						:class="{ 'unread': !item.read }"
					>
						<view class="avatar">
							<uv-icon 
								:name="item.icon" 
								:color="item.iconColor" 
								size="26"
								:custom-style="{ backgroundColor: item.bgColor, padding: '12rpx', borderRadius: '50%' }"
							></uv-icon>
						</view>
						<view class="message-content">
							<view class="title">
								<text class="title-text">{{ item.title }}</text>
								<text class="time">{{ item.time }}</text>
							</view>
							<view class="content">
								<text class="content-text">{{ item.content }}</text>
							</view>
						</view>
						<uv-icon 
							v-if="!item.read" 
							name="radio-button-fill" 
							color="#007AFF" 
							size="16"
							class="unread-dot"
						></uv-icon>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="action-bar" v-if="hasUnreadMessages">
			<view class="action-item" @tap="markAllAsRead">
				<uv-icon name="checkmark-circle" size="22" color="#333"></uv-icon>
				<text>全部已读</text>
			</view>
			<view class="action-item" @tap="clearReadMessages">
				<uv-icon name="trash" size="22" color="#333"></uv-icon>
				<text>清空已读</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Message',
		data() {
			return {
				activeTab: 0,
				tabs: [
					{ name: '全部', unread: 5 },
					{ name: '系统', unread: 2 },
					{ name: '订单', unread: 2 },
					{ name: '活动', unread: 1 },
					{ name: '客服', unread: 0 }
				],
				messages: [
					{
						id: 1,
						title: '订单确认',
						content: '您的订单已确认，将在30分钟内送达',
						time: '今天 10:30',
						read: false,
						type: 1, // 订单类
						icon: 'order',
						iconColor: '#fff',
						bgColor: '#007AFF'
					},
					{
						id: 2,
						title: '系统通知',
						content: '系统将在今晚22:00进行维护',
						time: '今天 09:15',
						read: false,
						type: 0, // 系统类
						icon: 'setting',
						iconColor: '#fff',
						bgColor: '#FF9900'
					},
					{
						id: 3,
						title: '优惠活动',
						content: '新用户专享优惠券已发放',
						time: '昨天 15:20',
						read: true,
						type: 3, // 活动类
						icon: 'gift',
						iconColor: '#fff',
						bgColor: '#FF3333'
					},
					{
						id: 4,
						title: '订单状态更新',
						content: '您的订单已发货，点击查看物流信息',
						time: '昨天 14:05',
						read: false,
						type: 1, // 订单类
						icon: 'order',
						iconColor: '#fff',
						bgColor: '#007AFF'
					},
					{
						id: 5,
						title: '账户安全',
						content: '您的登录密码已修改成功',
						time: '前天 18:30',
						read: true,
						type: 0, // 系统类
						icon: 'lock',
						iconColor: '#fff',
						bgColor: '#19be6b'
					},
					{
						id: 6,
						title: '客服回复',
						content: '关于您咨询的问题，我们已为您解答',
						time: '05-15 09:45',
						read: true,
						type: 4, // 客服类
						icon: 'kefu-epoch',
						iconColor: '#fff',
						bgColor: '#9c27b0'
					}
				]
			}
		},
		computed: {
			filteredMessages() {
				if (this.activeTab === 0) {
					return this.messages;
				}
				return this.messages.filter(msg => msg.type === this.activeTab - 1);
			},
			groupedMessages() {
				// 按日期分组消息
				const groups = {};
				const today = new Date();
				const yesterday = new Date(today);
				yesterday.setDate(yesterday.getDate() - 1);
				
				const formatDate = (date) => {
					const month = date.getMonth() + 1;
					const day = date.getDate();
					return `${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
				};
				
				const todayStr = formatDate(today);
				const yesterdayStr = formatDate(yesterday);
				
				this.filteredMessages.forEach(msg => {
					const timeParts = msg.time.split(' ');
					const datePart = timeParts[0];
					
					let groupLabel = '';
					if (datePart === '今天') {
						groupLabel = '今天';
					} else if (datePart === '昨天') {
						groupLabel = '昨天';
					} else if (datePart === todayStr) {
						groupLabel = '今天';
					} else if (datePart === yesterdayStr) {
						groupLabel = '昨天';
					} else {
						groupLabel = datePart;
					}
					
					if (!groups[groupLabel]) {
						groups[groupLabel] = [];
					}
					groups[groupLabel].push(msg);
				});
				
				// 转换为数组格式，按日期排序
				return Object.keys(groups)
					.sort((a, b) => {
						if (a === '今天') return -1;
						if (b === '今天') return 1;
						if (a === '昨天') return -1;
						if (b === '昨天') return 1;
						return b.localeCompare(a);
					})
					.map(date => ({
						date: date,
						messages: groups[date]
					}));
			},
			hasUnreadMessages() {
				return this.messages.some(msg => !msg.read);
			}
		},
		methods: {
			switchTab(index) {
				this.activeTab = index;
			},
			readMessage(message) {
				// 标记为已读
				message.read = true;
				// 更新未读数量
				this.updateUnreadCount();
				// 跳转到详情页或执行其他操作
				uni.showToast({ title: '查看消息', icon: 'none' });
			},
			markAllAsRead() {
				// 标记所有消息为已读
				const unreadCount = this.messages.filter(msg => !msg.read).length;
				if (unreadCount === 0) {
					uni.showToast({ title: '暂无未读消息', icon: 'none' });
					return;
				}
				
				this.messages.forEach(msg => {
					msg.read = true;
				});
				this.updateUnreadCount();
				uni.showToast({ title: `已标记${unreadCount}条为已读`, icon: 'success' });
			},
			clearReadMessages() {
				// 删除所有已读消息
				const readCount = this.messages.filter(msg => msg.read).length;
				if (readCount === 0) {
					uni.showToast({ title: '暂无已读消息', icon: 'none' });
					return;
				}
				
				this.messages = this.messages.filter(msg => !msg.read);
				this.updateUnreadCount();
				uni.showToast({ title: `已清理${readCount}条已读消息`, icon: 'success' });
			},
			updateUnreadCount() {
				// 更新各分类未读数量
				this.tabs[0].unread = this.messages.filter(msg => !msg.read).length;
				this.tabs[1].unread = this.messages.filter(msg => !msg.read && msg.type === 0).length;
				this.tabs[2].unread = this.messages.filter(msg => !msg.read && msg.type === 1).length;
				this.tabs[3].unread = this.messages.filter(msg => !msg.read && msg.type === 3).length;
				this.tabs[4].unread = this.messages.filter(msg => !msg.read && msg.type === 4).length;
			},
			searchMessages() {
				uni.showToast({ title: '搜索功能待实现', icon: 'none' });
			},
			showMenu() {
				uni.showToast({ title: '更多功能待实现', icon: 'none' });
			},
			refreshMessages() {
				uni.showToast({ title: '刷新成功', icon: 'success' });
			}
		}
	}
</script>

<style scoped lang="less">
.message-container {
	height: 100%;
	width: 100%;
	background-color: #f8f8f8;
	display: flex;
	flex-direction: column;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.header-actions {
		display: flex;
		align-items: center;
	}
}

.message-tabs {
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
	
	.tabs-wrapper {
		display: flex;
		padding: 20rpx 0;
		min-width: max-content;
		padding-left: 30rpx;
	}
	
	.tab-item {
		flex-shrink: 0;
		padding: 12rpx 30rpx;
		font-size: 28rpx;
		color: #666;
		position: relative;
		margin-right: 30rpx;
		border-radius: 30rpx;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		transition: all 0.3s ease;
		
		&.active {
			color: #007AFF;
			background-color: #e6f2ff;
			font-weight: bold;
			transform: scale(1.05);
		}
		
		.unread-badge {
			background-color: #ff3333;
			color: #fff;
			border-radius: 50%;
			font-size: 20rpx;
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			text-align: center;
			margin-left: 10rpx;
			animation: pulse 1.5s infinite;
		}
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

.message-list {
	flex: 1;
	overflow-y: auto;
	
	.empty-state {
		text-align: center;
		padding: 200rpx 50rpx;
		
		.empty-text {
			display: block;
			margin: 20rpx 0 10rpx;
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}
		
		.empty-desc {
			display: block;
			font-size: 26rpx;
			color: #999;
			margin-bottom: 30rpx;
		}
	}
	
	.group-title {
		display: block;
		padding: 20rpx 30rpx 10rpx;
		font-size: 24rpx;
		color: #999;
		background-color: #f8f8f8;
	}
	
	.message-item {
		display: flex;
		background-color: #fff;
		padding: 24rpx 30rpx;
		border-bottom: 1rpx solid #eee;
		position: relative;
		transition: background-color 0.2s ease;
		
		&.unread {
			.title-text {
				font-weight: bold;
			}
			
			.content-text {
				color: #333;
			}
		}
		
		&:active {
			background-color: #f0f0f0;
		}
		
		&:last-child {
			border-bottom: none;
		}
		
		.avatar {
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.message-content {
			flex: 1;
			min-width: 0; // 防止文本溢出
			
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;
				
				.title-text {
					font-size: 30rpx;
					color: #333;
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				.time {
					font-size: 24rpx;
					color: #999;
					margin-left: 20rpx;
					flex-shrink: 0;
				}
			}
			
			.content {
				.content-text {
					font-size: 26rpx;
					color: #666;
					lines: 1;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
		
		.unread-dot {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}
	}
}

.action-bar {
	display: flex;
	background-color: #fff;
	border-top: 1rpx solid #eee;
	padding: 20rpx 0;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.action-item {
		flex: 1;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #333;
		padding: 10rpx 0;
		border-radius: 10rpx;
		margin: 0 20rpx;
		transition: background-color 0.2s ease;
		
		&:first-child {
			// 移除边框分隔线
		}
		
		&:active {
			background-color: #f0f0f0;
		}
	}
}
</style>